<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="layout/default">
<head lang="UTF-8">
<head>
    <meta charset="UTF-8">
    <title>Your profile</title>
</head>
<body>
    <div class="row" th:fragment="content">

        <h2 class="indigo-text center" th:text="#{profile.title}">Personal info</h2>

        <!--<ul th:if="${#fields.hasErrors('*')}" class="errorlist">
            <li th:each="err : ${#fields.errors('*')}" th:text="${err}">Input is incorrect</li>
        </ul>-->
        <form th:action="@{/profile}" method="post" class="col m8 s12 offset-m2"  th:object="${profileForm}">
            <div class="row">

                <div class="input-field col s6">
                    <input id="twitterHandle" type="text" th:field="*{twitterHandle}" th:errorclass="invalid" />
                    <label for="twitterHandle"  >Last Name</label>
                    <div th:errors="*{twitterHandle}" class="red-text">Error</div>
                </div>
                <div class="input-field col s6">
                    <input id="email" type="text" th:field="*{email}" th:errorclass="invalid" />
                    <label for="email" th:text="#{profile.email}">Email</label>
                    <div th:errors="*{email}" class="red-text">Error</div>
                </div>
                <div class="input-field col s6">
                    <input id="birthDate" type="text" th:field="*{birthDate}" th:placeholder="${dateFormat}" th:errorclass="invalid" />
                    <label for="birthDate">BirthDate</label>
                    <div th:errors="*{birthDate}" class="red-text">Error</div>
                </div>

                <fieldset class="row">
                    <legend >What do you like?</legend>

                    <button class="btn teal" type="submit" name="addTaste" >Add taste
                        <i class="mdi-content-add left"></i>
                    </button>

                    <div th:errors="*{tastes}" class="red-text">Error</div>
                    <div class="row" th:each="row,rowStat : *{states}">
                        <div class="col s6">
                            <input type="text" th:field="*{tastes[__${rowStat.index}__}]}" >
                        </div>
                        <div class="col s6">
                            <button class="btn red" type="submit" name="removeTaste" th:value="${rowStat.index}" >Remove
                                <i class="mdi-action-delete right waves-effect"></i>
                            </button>
                        </div>
                    </div>
                </fieldset>

                <div class="input-field col s6">
                    <button class="btn waves-effect waves-light" type="submit">
                        Submit
                        <i class="mdi-content-send right"></i>
                    </button>
                </div>
            </div>
        </form>

    </div>

</body>
</html>